html{
	height: 100%;
	background: url("../images/green.jpg") no-repeat center center;
	background-size: cover;
}

.sp-circle-link {
	position: absolute;
	left: 50px;
	top: 0px;
	margin-left: -50px;
	text-align: center;
	line-height: 100px;
	width: 100px;
	height: 100px;
	background: #fff;
	color: #3f1616;
	font-size: 25px;
	
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	
	animation: fadeInRotate 1s linear 16s backwards;
	-webkit-animation: fadeInRotate 1s linear 16s backwards;
	-moz-animation: fadeInRotate 1s linear 16s backwards;
	-ms-animation: fadeInRotate 1s linear 16s backwards;
	
	transform: scale(1) rotate(0deg);
	-webkit-transform: scale(1) rotate(0deg);
	-moz-transform: scale(1) rotate(0deg);
	-o-transform: scale(1) rotate(0deg);
	-ms-transform: scale(1) rotate(0deg);
	
}
.sp-circle-link:hover {
	background: #85373b;
	color: #fff;	
		
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	
	animation: fadeInRotate 1s linear 16s backwards;
	-webkit-animation: fadeInRotate 1s linear 16s backwards;
	-moz-animation: fadeInRotate 1s linear 16s backwards;
	-ms-animation: fadeInRotate 1s linear 16s backwards;
	
	transform: scale(1) rotate(0deg);
	-webkit-transform: scale(1) rotate(0deg);
	-moz-transform: scale(1) rotate(0deg);
	-o-transform: scale(1) rotate(0deg);
	-ms-transform: scale(1) rotate(0deg);
	
	
	
}

#animated_div {
    animation: 5s ease 0s normal none 1 animated_div;
    background: none repeat scroll 0 0 #92b901;
    border-radius: 50%;
    color: #ffffff;
    font-size: 20px;
    font-weight: lighter;
    height: 40px;
    padding: 10px;
    position: relative;
    width: 60px;
    
}
@keyframes animated_div {
0% {
    left: 0;
    transform: rotate(0deg);
}
25% {
    left: 0;
    transform: rotate(20deg);
}
50% {
    left: 500px;
    transform: rotate(0deg);
}
55% {
    left: 500px;
    transform: rotate(0deg);
}
70% {
    background: none repeat scroll 0 0 #1ec7e6;
    left: 500px;
    transform: rotate(0deg);
}
100% {
    left: 0;
    transform: rotate(-360deg);
}
}


.sp-circle-link-aboutus {
	position: absolute;

	left: 50px;
	top: 0px;

	margin-left: -50px;
	text-align: center;
	line-height: 100px;
	width: 100px;
	height: 100px;
	background: #CC9900;
	color: #3f1616;
	font-size: 15px;
	
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	

}

.sp-circle-link-contactus {
	position: absolute;
	left: 250px;
	top: 0px;
	margin-left: -50px;
	text-align: center;
	line-height: 100px;
	width: 100px;
	height: 100px;
	background: #CC9900;
	color: #3f1616;
	font-size: 15px;
	
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;

}

.sp-circle-link-ifiwas {
	position: absolute;
	left: 350px;
	top: 0px;
	margin-left: -50px;
	text-align: center;
	line-height: 100px;
	width: 100px;
	height: 100px;
	background: #CC9900;
	color: #3f1616;
	font-size: 15px;
	
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;

}


.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
 
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
 
    overflow:hidden;
    }  
 
.rotate:hover{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    left: 150px;
	top: 0px;
}

#footer{
	color:yellow;
	position: relative;
	margin-top: 650px;
	margin-left:85%;
}

#flashText{
	color: red;
	font-size: 60px;
	margin-top: 20%;
	margin-left:10px;
	position: fixed;
}

img{
	height: 100px;
	width: 100px;
	position: fixed;
}

